<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ace="http://www.icefaces.org/icefaces/components"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
  <h:head>
    <title>Facelet Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </h:head>
  <h:body>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:c="http://java.sun.com/jsp/jstl/core"
                    xmlns:ace="http://www.icefaces.org/icefaces/components"
                    xmlns:icecore="http://www.icefaces.org/icefaces/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="layout.xhtml">
      <ui:define name="title">PayPal / Awesome Dates</ui:define>
      <ui:define name="content">

        <ace:panel id="paymentPanel" header="Payment details">

          <h:panelGrid columns="2" style="margin: 5px 0 25px 0;">
            <h:outputText value="Secure Transaction"/>
            <img src="images/cadenas.png" alt="cadenas"/>
          </h:panelGrid>

          <h3 style="text-align: center;">Resume of the transaction</h3>

          <h:panelGrid columns="1" style="line-height: 2em;">
            <h:outputText value="Pay to : Awesome dates inc."/>
            <h:outputText value="Payment for : #{userManager.user.username}"/>
            <h:outputText value="Amount : 15.00$ CAD"/>
          </h:panelGrid>

          <h:form style="margin: 25px 0;">
            <h:outputText value="If you have never paid through PayPal" style="margin-right: 30px;"/>
            <h:commandButton value="Click here"/>
          </h:form>

          <h3 style="text-align: center;">PayPal Login</h3>

          <h:form style="line-height: 2.5em;">
            <h:panelGrid columns="2">
              <h:outputLabel value="Email adress"/>
              <ace:textEntry/>   
              <h:outputLabel value="Paypal password"/>
              <ace:textEntry/>   
            </h:panelGrid >
            <h:commandButton value="Upgrade" action="#{userManager.upgradeAccount()}"/>
          </h:form>

        </ace:panel>
        <ace:messages/>

      </ui:define>
    </ui:composition>
  </h:body>
</html>

